<template>
  <div>
    <el-row :gutter="20">
      <!-- 左侧：树形结构 -->
      <el-col :span="6">
        <div>
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          </el-input>
          <el-tree
            class="filter-tree"
            :props="props"
            :load="loadNode"
            lazy
            show-checkbox
            @check-change="handleCheckChange"
            ref="tree"
          >
          </el-tree>
        </div>
      </el-col>
      <!-- 右侧：项目数据 -->
      <el-col :span="18">
        <el-table border :data="tableData">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column fixed="right" label="类型" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  data () {
    return {
      props: {
        label: 'name',
        children: 'zones'
      },
      count: 1,
      tableData: [
        {}
      ]
    }
  },
  methods: {
    handleCheckChange (data, checked, indeterminate) {
      console.log(data, checked, indeterminate)
    },
    handleNodeClick (data) {
      console.log(data)
    },
    handleClick (row) {
      console.log(row)
    },
    loadNode (node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: '2020年项目' }, { name: '2019年项目' }])
      }
      if (node.level > 3) return resolve([])
      var hasChild
      if (node.data.name === '2020年项目') {
        hasChild = true
      } else if (node.data.name === '2019年项目') {
        hasChild = false
      } else {
        hasChild = Math.random() > 0.5
      }
      setTimeout(() => {
        var data
        if (hasChild) {
          data = [{
            name: '项目' + this.count++
          }, {
            name: '项目' + this.count++
          }]
        } else {
          data = []
        }
        resolve(data)
      }, 500)
    }
  }
}
</script>

<style>
</style>
